<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益设置</el-breadcrumb-item>
        <el-breadcrumb-item>编辑权益</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-tabs v-model="activeName" >
        <el-tab-pane label="编辑权益" name="first" :disabled="true">
          <el-form :model="dataForm"  ref="dataForm" :size="size">
              <el-form-item class="mb30">
                <span style="color:red">*</span>
                <span class="font14 color333">所属组织：</span>
                <span class="font14 color333">{{dataForm.deptName}}</span>
              </el-form-item >
              <el-form-item   prop="legalRuleName" class="labelTextSize14 w200 mb10">
                <span style="color:red">*</span>
                <span class="font14 color333">权益名称：</span>
                <el-input v-model="dataForm.legalRuleName" auto-complete="off" :disabled="false"  maxlength="20" clearable class="width200 mb10"></el-input>
                <p class=" font12 colorE7 pl85">最多输入20个字符</p>
              </el-form-item>
              <el-form-item  prop="legalRuleType" class="labelTextSize14 w200 mb30">
                <span style="color:red">*</span>
                <span class="font14 color333">权益类型：</span>
                  <el-select v-model="dataForm.legalRuleType" @change="selectModel($event)" clearable placeholder="请选择" :size="size" :disabled="disabled" class="width200">
                    <el-option
                      v-for="item in ruleTypeList"
                      :key="item.id"
                      :label="item.ruleName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
              </el-form-item>
            <el-row v-if="this.dataForm.legalRuleType==1" class="mb120">
              <el-form-item label="购物全场：" prop="ruleValue" class="labelTextSize14 w200" label-width="83px">
                    <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" class="width200"></el-input><span class="turnInlineBlock font14 color333 m_l10">折</span>
              </el-form-item>
            </el-row>
            <el-row v-if="this.dataForm.legalRuleType==2">
              <el-form-item  prop="ruleValue" class="labelTextSize14 w200">
                <span style="color:red">*</span>
                <span class="color333 font14">下单多赠送：</span>
                  <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" class="width200"></el-input><span class="turnInlineBlock font14 color333 m_l10">倍积分</span>
              </el-form-item>
            </el-row>
            <el-row v-if="this.dataForm.legalRuleType==3">
              <el-form-item class="mb30">
                <el-radio-group v-model="dataForm.freightMode">
                    <el-radio :label="1"  class="form-radio mr60">免运费</el-radio>
                    <el-radio :label="2"  class="form-radio">减运费</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="this.dataForm.freightMode==2" class="mb120">
                  <div v-for="(item,index) in dataForm.logisticsIncrement" :key="index" >
                    <el-form-item class="mb30 ">
                      <!-- <el-col :span="10"> -->
                        <span style="color:red;margin-top:10px">*</span>
                        <el-form-item  label="下单满：" class="labelTextSize14 formItemNoMargin" >
                            <el-input  type="text" v-model="dataForm.logisticsIncrement[index].satisfyOrder" placeholder="输入数字"   class="inputWidth200" clearable
                            @input="dataForm.logisticsIncrement[index].satisfyOrder=dataForm.logisticsIncrement[index].satisfyOrder.replace(/[^\d.]/g,'')" maxlength="5"></el-input>
                            <span class="turnInlineBlock m_l10 font14 color333 mr10" >元，减免</span>
                            <el-input  type="text" v-model="dataForm.logisticsIncrement[index].reductionMoney" placeholder="输入数字" class="inputWidth200" clearable
                            @input="dataForm.logisticsIncrement[index].reductionMoney=dataForm.logisticsIncrement[index].reductionMoney.replace(/[^\d.]/g,'')" maxlength="5"></el-input>
                            <span class="turnInlineBlock m_l10 font14 color333 mr10">元运费</span>
                            <el-button :size="size" type="text"  @click="editOrderGivenStairArr(index)" v-show="index==0" >添加</el-button>
                            <el-button :size="size" type="text"   @click="deleteOrderGivenStairArr(index)" v-show="index != 0" class="textRed noMarginL">删除</el-button>
                        </el-form-item>
                     
                    </el-form-item>
                  </div>
              </el-form-item>
            </el-row>
            <el-row v-if="this.dataForm.legalRuleType==4" class="mb120">
              <el-form-item prop="ruleValue" class="labelTextSize14 w200">
                    <span style="color:red">*</span>
                    <span class="color333">抽奖活动每日赠送：</span>
                    <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" maxlength="5" class="width200"></el-input><span class="turnInlineBlock font14 color333 m_l10">次</span>
              </el-form-item>
            </el-row>
            <el-row v-if="this.dataForm.legalRuleType==5" class="mb120">
              <el-form-item  prop="ruleValue" class="labelTextSize14 w200">
                    <span style="color:red">*</span>
                    <span class="color333">免费查看：</span>
                    <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable @input="rulePowerForm.ruleValue=rulePowerForm.ruleValue.replace(/[^\d.]/g,'')" maxlength="5" class="width200"></el-input><span class="turnInlineBlock font14 color333 m_l10">付费板块</span>
            </el-form-item>
            </el-row>
            <el-row v-if="this.dataForm.legalRuleType==6">
              <el-form-item class="mb120">
                <span style="color:red">*</span>
                <span class="font14 color333">拥有专有客服</span>
              </el-form-item>
            </el-row>
            <el-row v-if="this.dataForm.legalRuleType==7">
              <el-form-item class="mb120">
                  <span style="color:red">*</span>
                  <span class="color333 font14">购买VIP，自动从当前等级升级一个等级</span>
              </el-form-item>
            </el-row>
            <div class="t_c">
              <el-button :size="size" @click="back" type="primary" plain class="mr60">取消</el-button>
              <el-button :size="size" type="primary" @click="submitForm" :loading="editLoading" v-if="dataForm.legalRuleType !=1 && dataForm.legalRuleType!=2 && dataForm.legalRuleType!=3" class="mr60">保存</el-button>
              <el-button :size="size" type="primary" @click="nextStepRulePower(1)" :loading="editLoading" v-if="dataForm.legalRuleType==1 || dataForm.legalRuleType==2 || dataForm.legalRuleType==3">下一步</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <!-- 店铺商品信息 -->
        <el-tab-pane label="选择权益范围" name="second" :disabled="disabled" v-if="this.dataForm.legalRuleType ==1 || this.dataForm.legalRuleType ==2 || this.dataForm.legalRuleType ==3">
          <div class="tab-container tab-container-noPadding active3">
            <el-tabs type="border-card" >
            <el-tab-pane label="选择店铺">
              <el-row class="overh">
                <el-row>
                    <el-form :inline="true" :model="storeSearchForm" size="mini" ref="storeSearchForm">
                      <el-row class="search-input">
                      <el-form-item label="所属平台：" prop="childName" class="mr30" v-if="deptMsg==0">
                        <el-select v-model="storeSearchForm.childName"  placeholder="所属平台" clearable>
                          <el-option label="全部" value=""></el-option>
                          <el-option
                            v-for="item in deptOption"
                            :key="item.id"
                            :label="item.childName"
                            :value="item.childName"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="店铺编码：" prop="storeCode" class="mr30">
                        <el-input v-model="storeSearchForm.storeCode" clearable maxlength="80" placeholder="店铺编码"></el-input>
                      </el-form-item>
                      <el-form-item label="店铺名称：" prop="storeName">
                        <el-input v-model="storeSearchForm.storeName" clearable maxlength="80" placeholder="输入店铺名称"></el-input>
                      </el-form-item>
                      <el-form-item label="所属商家：" prop="merchantName">
                        <el-input v-model="storeSearchForm.merchantName" clearable maxlength="80" placeholder="输入所属商家"></el-input>
                      </el-form-item>
                      <el-form-item label="店铺类型：" prop="storeType">
                        <el-select v-model="storeSearchForm.storeType" placeholder size="mini" clearable>
                          <el-option label="全部" value=""></el-option>
                          <el-option label="自营店铺" value="0"></el-option>
                          <el-option label="入驻店铺" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                      </el-row>                     
                    </el-form>
                    <el-row class="search-button">
                        <el-button type="primary" size="mini" @click="storeSearch()" icon="el-icon-search">搜索</el-button>
                        <el-button type="primary" plain  size="mini"  @click="resetStoreSearch()">重置</el-button>
                        <el-button type="primary" size="mini" @click="querySupplierListForAdd2()">添加店铺</el-button>
                        <el-button type="primary" size="mini" @click="deletePowerStore()">批量删除</el-button>
                        <el-button type="primary" size="mini" @click="addAllStore()">添加全部店铺</el-button>
                    </el-row>
                </el-row>
                <div class="f_l mb30">
                  <el-button  type="primary"  plain  size="mini" v-if="storeTableDataTatol<=9999">已选店铺({{storeTableDataTatol}})</el-button>
                  <el-button type="primary" plain size="mini" v-else>已选店铺(9999+)</el-button>
                </div>
              </el-row>
              <el-table :data="storeTableData"  @selection-change="storeTableDataselectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="店铺编号">
                  <template slot-scope="scope">
                    <span>{{ scope.row.storeCode}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="店铺名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.storeName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="店铺类型">
                  <template slot-scope="scope">
                    <span v-if="scope.row.storeType =='0'">自营店铺</span>
                    <span v-else>入驻店铺</span>
                  </template>
                </el-table-column>
                <el-table-column label="所属商家">
                  <template slot-scope="scope">
                    <span>{{ scope.row.merchantName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" class="textButton" @click="deletePowerStore(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--分页栏-->
              <div class="toolbar t_r mb60">
                <el-pagination
                  layout="total, sizes, prev, pager, next, jumper"
                  @current-change="mainSroreMerchantRefreshPageRequest"
                  :current-page="mainStoreMerchantForm.pageNo"
                  :page-size="mainStoreMerchantForm.pageSize"
                  :total="storeTableDataTatol"
                  :page-sizes="[10, 20, 30, 40]"
                  @size-change="mainSroreMerchantHandleSizeChange"
                ></el-pagination>
              </div>
               <div class="t_c">
                  <el-button :size="size" @click="back" type="primary" plain class="mr60">取消</el-button>
                  <el-button :size="size" type="primary" @click="saveInfo" :loading="editLoading">保存</el-button>
             </div>
            </el-tab-pane>
            <!-- 商品信息 -->
            <el-tab-pane label="选择商品">
              <el-row>
                <div>
                  <el-form :inline="true" :model="merchantProductSearchForm" size="mini" ref="merchantProductSearchForm">
                    <el-row class="search-input">
                    <el-form-item label="商品分类：" prop="categoryName" class="mb30">
                      <el-input v-model="merchantProductSearchForm.categoryName" clearable placeholder="输入商品分类"  maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码：" prop="mpCode" class="mb30">
                      <el-input v-model="merchantProductSearchForm.mpCode" clearable placeholder="输入商品编码"  maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称：" prop="mpName" class="mb30">
                      <el-input v-model="merchantProductSearchForm.mpName" clearable placeholder="输入商品名称"  maxlength="80"></el-input>
                    </el-form-item>
                    </el-row>
                  </el-form>
                  <div class="search-button">
                    <el-button type="primary" size="mini" @click="powerProductSearch()" icon="el-icon-search">搜索</el-button>
                      <el-button type="primary" plain size="mini" @click="resetProductTable()">重置</el-button>
                      <el-button type="primary" size="mini" @click="addProduct">添加商品</el-button>
                      <el-button type="primary" size="mini" @click="deletePowerProductsByBatch">批量删除</el-button>
                      <el-button type="primary" size="mini" @click="saveAllProductInfo">添加全部商品</el-button>
                    </div>
                </div>
                <div class="row-line-button">
                <el-button  type="primary"  plain  size="mini" v-if="merchantProductTableDataTotal<=9999">已选商品({{merchantProductTableDataTotal}})</el-button>
                <el-button type="primary" plain size="mini" v-else>已选商品(9999+)</el-button>
              </div>
              </el-row>
              <el-table
                  :data="merchantProductTableData"
                  :size="size"
                  row-key="id"
                  default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  @selection-change="repelSelectionChange"
                  class="tableStyle"
                >
                  <el-table-column type="selection" width="55" align="center"></el-table-column>
                  <el-table-column prop="mpCode" label="商品编码" width="180" align="left"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180" sortable align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mpName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="storeName" label="商品分类" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.categoryName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="salePrice" label="商品价格" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.salePrice}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="storeName" label="所属店铺" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.storeName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="merchantName" label="所属商家" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.merchantName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" fixed="right" align="center" width="200">
                    <template slot-scope="scope">
                      <el-button @click.native.prevent="deletePowerProducts(scope.row.id,scope.row.mpParentId)" type="text">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页栏-->
                <div class="toolbar t_r mb60">
                  <el-pagination
                    @size-change="handleSizeChangeMerchantProductTableData"
                    @current-change="handleCurrentChangeMerchantProductTableData"
                    :current-page="merchantProductSearchForm.start"
                    :page-sizes="[10]"
                    :page-size="merchantProductSearchForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="merchantProductTableDataTotal"
                  ></el-pagination>
                </div>
                <div class="t_c">
                  <el-button :size="size" @click="back" type="primary" plain class="mr60">取消</el-button>
                  <el-button :size="size" type="primary" @click="saveInfo" :loading="editLoading">保存</el-button>
             </div>
            </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
        <!-- 选择参与店铺 -->
            <el-dialog :title="'添加店铺'" :visible.sync="storeVisible" :close-on-click-modal="false">
              <div>
                <div>
                  <el-form :inline="true" :model="storeForm" size="mini" ref="storeForm">
                    <el-row class="search-input">
                    <el-form-item label="店铺名称：" prop="storeName">
                      <el-input v-model="storeForm.storeName"  size="mini" clearable placeholder="请输入店铺名称"  maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺编号：" prop="storeCode">
                      <el-input v-model="storeForm.storeCode"  size="mini" clearable placeholder="请输入店铺编号"  maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="所属商家名称：" prop="merchantName">
                      <el-input v-model="storeForm.merchantName"  size="mini" clearable placeholder="请输入所属商家名称"  maxlength="80"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺类型：" prop="storeType" class="mb30">
                      <el-select v-model="storeForm.storeType" placeholder="全部" size="mini" clearable>
                        <el-option label="自营店铺" value="0"></el-option>
                        <el-option label="入驻店铺" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                    </el-row>
                  </el-form>
                  <el-row class="mb30 t_r">
                    <el-button type="primary" @click="storeFormFind()" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" plain @click="resetStoreForm()">重置</el-button>
                  </el-row>
                </div>
                <div>
                  <el-table
                    :data="storeTableData2"
                    @selection-change="storeTableData2AddSelectionChange"
                  >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="店铺编号">
                      <template slot-scope="scope">
                        <span>{{ scope.row.storeCode}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="店铺名称">
                      <template slot-scope="scope">
                        <span>{{ scope.row.storeName}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="storeType" label="店铺类型">
                      <template slot-scope="scope">
                        <span v-if="scope.row.storeType == '0'">自营店铺</span>
                        <span v-if="scope.row.storeType == '1'">入驻店铺</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="所属商家">
                      <template slot-scope="scope">
                        <span>{{ scope.row.merchantName}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!--分页栏-->
                  <div class="toolbar t_r mb60" v-if="storeTableData2.length > 0">
                    <el-pagination
                      layout="total, sizes, prev, pager, next, jumper"
                      @current-change="refreshPageRequestStore"
                      :current-page="merchantFormStore.start"
                      :page-size="merchantFormStore.limit"
                      :total="merchantTableDataTatolStore"
                      :page-sizes="[10, 20, 30, 40]"
                      @size-change="handleSizeChangeStore"
                    ></el-pagination>
                  </div>
                </div>
              </div>
              <div slot="footer" class="dialog-footer t_c">
                <el-button type="primary" plain :size="size" @click.native="storeVisible = false">取消</el-button>
                <el-button :size="size" type="primary"  @click="AddStore">确定</el-button>
              </div>
            </el-dialog>
            <!-- 添加商品 -->
            <el-dialog :visible.sync="productVisible" title="添加商品" :close-on-click-modal="false">
              <div>
                <div>
                  <el-form inline :model="productForm" ref="productForm" :size="size">
                    <div class="search-input">
                      <el-form-item label="商品名称：" prop="goodsName">
                        <el-input v-model="productForm.goodsName" auto-complete="off" clearable placeholder="请输入商品名称"  maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="商品编码：" prop="thirdSpuId">
                        <el-input v-model="productForm.thirdSpuId" auto-complete="off" clearable placeholder="请输入商品编号"  maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="商品类目：" prop="goodsCategory">
                        <el-input v-model="productForm.goodsCategory" auto-complete="off" clearable placeholder="请输入类目名称"  maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="所属商家：" prop="merchantName" class="mb30 w200">
                        <el-input v-model="productForm.merchantName" auto-complete="off" clearable placeholder="输入所属商家" maxlength="80"></el-input>
                      </el-form-item>
                      <el-form-item label="所属店铺：" prop="storeName" class="mb30 w200">
                        <el-input v-model="productForm.storeName" auto-complete="off" clearable placeholder="输入所属店铺" maxlength="80"></el-input>
                      </el-form-item>
                    </div>
                  </el-form>

                  <el-row class="mb30 t_r">
                    <el-button type="primary" size="mini" @click="productFormFind()" icon="el-icon-search">搜索</el-button>
                    <el-button type="primary" plain size="mini" @click="resetProductForm()">重置</el-button>
                  </el-row>
                </div>
                <div>
                  <el-table
                    :data="tableDataTwo"
                    @selection-change="addSelectionChangeProduct"
                    :header-cell-style="tableHeaderColor"
                    ref="multipleTable"
                    :row-class-name="tableRowClassName"
                    :size="size"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="code" label="商品编码" sortable align="center"></el-table-column>
                    <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
                    <el-table-column prop="goodsCategory" label="商品类目" align="center"></el-table-column>
                    <el-table-column prop="salePriceScope" label="原价（元）" align="center"></el-table-column>
                    <el-table-column prop="storeName" label="所属店铺" align="center"></el-table-column>
                    <el-table-column prop="merchantName" label="所属商家" align="center"></el-table-column>
                  </el-table>
                  <!--分页栏-->
                  <div class="toolbar t_r mb60" v-if="tableDataTwo.length > 0">
                    <el-pagination
                      @size-change="producthandleSizeChange"
                      @current-change="producthandleCurrentChange"
                      :current-page="productForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="productForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="productListTotal"
                    ></el-pagination>
                  </div>
                </div>
              </div>
              <div slot="footer" class="dialog-footer t_c">
                <el-button type="primary" plain :size="size" @click.native="productVisible = false">取消</el-button>
                <el-button :size="size" type="primary" @click.native="productVisible = false" @click="productAddClick"
                >确定</el-button>
              </div>
            </el-dialog>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";
import XLSX from "xlsx";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  created() {
    //单个参数传递的时候
    this.id = this.$route.query.id; //获取上个页面传递的id,在下面获取数据的时候先提交id
    this.type = this.$route.query.type;
  },
  data() {
    return {
      disabled: true,
      shopping: false,
      integral: false,
      logistics: false,
      activity: false,
      content: false,
      service: false,
      grade: false,
      detailShow: true,
      storeVisible: false,
      productVisible: false,
      storeTableData2: [],
      ruleRangeForm: {},
      tableDataTwo: [],
      repelSelection: [],
      productAddSelection: [],
      merchantFormStore: {
        start: 1,
        limit: 10
      },
      productForm: {
        start: 1,
        limit: 10,
        goodsName: null,
        thirdSpuId: null,
        goodsCategory: null,
        legalRuleId: null,
        productName: "",
        productNo: "",
        barCode: "",
        chineseName: "",
        code: "",
        merchantName:null,
        storeName:null,
      },
      storeForm: {
        start: 1,
        limit: 10,
        merchantIds: "",
        storeName: "",
        storeCode: "",
        orgNumber: "",
        merchantName: "",
        storeType: ""
      },
      merchantProductSearchForm: {
        merchantId: null,
        mpCode: null,
        mpName: null,
        categoryName: null,
        legalRuleId: null,
        start: 1,
        limit: 10
      },
      mainStoreMerchantForm: {
        start: 1,
        limit: 10
      },
      storeSearchForm: {
        childName: "",
        storeCode: "",
        storeName: "",
        merchantName: "",
        storeType: "",
        start: 1,
        limit: 10
      },
      rulePowerFormRulesFirst: {
        //  legalRuleName: [{ required: true, message: "", trigger: "blur" }],
        // legalRuleType: [{ required: true, message: "", trigger: "change" }],
      },
      rulePowerFormRules: {
        //ruleValue: [{ required: true, message: "请输入必填项", trigger: "blur" }],
        // satisfyOrder: [{ required: true, message: "请输入必填项", trigger: "blur" }],
        // reductionMoney: [{ required: true, message: "请输入必填项", trigger: "blur" }],
      },
      rulePowerForm: {
        rtypeId: "",
        mode: 1,
        orderConsume: "",
        deptName: "",
        logisticsIncrement: [{ satisfyOrder: null, reductionMoney: null }],
        freightMode: 1,
        legalRuleType: "",
        legalRuleName: "",
        ruleValue: null
      },
      // 新增编辑界面数据
      dataForm: {
        id: "",
        legalRuleType: "",
        deptName: "",
        legalRuleName: "",
        ruleValue: null,
        freightMode: 1,
        logisticsIncrement: [{ satisfyOrder: "", reductionMoney: "" }]
      },
      merchantProductTableDataTotal: 0,
      merchantProductTotalCount: 0,
      storeTableDataTatol: 0,
      merchantProductTableData: [],
      storeTableData: [],
      storeTableDataSelection:[],
      addSelectionStoreTableData2:[],
      ruleTypeList: [
        {
          id: "1",
          ruleName: "购物权益"
        },
        {
          id: "2",
          ruleName: "积分权益"
        },
        {
          id: "3",
          ruleName: "物流权益"
        },
        {
          id: "4",
          ruleName: "活动特权"
        },
        {
          id: "5",
          ruleName: "内容特权"
        },
        {
          id: "6",
          ruleName: "服务特权"
        },
        {
          id: "7",
          ruleName: "等级升级"
        }
      ],
      imgUrl: "",
      activeName: "first",
      merchantTableDataTatolStore: 0,
      HEIGHT: window.innerHeight,
      type: null,
      vipLabel: "",
      tableData: [],
      data: [],
      startTime: null,
      endTime: null,
      id: null,
      businessId: "",
      deptMsg: JSON.parse(localStorage.getItem("user")).deptType, //当前登录组织信息
      userId: localStorage.getItem("userId"), //当前登录用户id
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      deptName: null,
      deptOption: [],
      content: null,
      size: "small",
      pageResult: {},
      value: 0,
      editLoading: false
    };
  },
  methods: {
    //权益商品列表删除方法
    deletePowerProducts(id, mpParentId) {
      let this_ = this;
      let query = {};
      query.id = id;
      query.mpParentId = mpParentId;
      this.utils.request.deletePowerProducts(query, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
        } else {
          this_.$message({ message: "删除失败", type: "error" });
        }
      });
    },
    //批量删除权益商品
    deletePowerProductsByBatch() {
      if (this.repelSelection.length == 0) {
        this.$message({ message: "删除时至少一条数据", type: "error" });
        return;
      }
      let this_ = this;
      let query = {};
      let deleteList = [];
      this.repelSelection.forEach(item => {
        deleteList.push({
          id: item.id,
          mpParentId: item.mpParentId
        });
      });
      query.productDelete = deleteList;
      this.utils.request.deletePowerProductsByBatch(query, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
        } else {
          this_.$message({ message: "删除失败", type: "error" });
        }
      });
    },
    //添加店铺
    querySupplierListForAdd2() {
      this.storeVisible = true;
      this.storeTableData2 = [];
      this.storeFormFind();
    },
    // 选择商品
    addSelectionChangeProduct(val) {
      let this_ = this;
      this_.productAddSelection = val;
    },
    //批量删除权益商品
    deletePowerProductsByBatch() {
      if (this.repelSelection.length == 0) {
        this.$message({ message: "删除时至少一条数据", type: "error" });
        return;
      }
      let this_ = this;
      let query = {};
      let deleteList = [];
      this.repelSelection.forEach(item => {
        deleteList.push({
          id: item.id,
          mpParentId: item.mpParentId
        });
      });
      query.productDelete = deleteList;
      this.utils.request.deletePowerProductsByBatch(query, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
        } else {
          this_.$message({ message: "删除失败", type: "error" });
        }
      });
    },
    addProduct() {
      this.productVisible = true;
      this.tableDataTwo = [];
      this.productFormFind();
    },
    //确定 选择店铺
    AddStore() {
      if (this.addSelectionStoreTableData2.length < 1) {
        this.$message({ message: "最少选择一条数据!", type: "error" });
        return;
      }
      let params = {};
      let storeList = [];
      let this_ = this;
      this.addSelectionStoreTableData2.forEach(element => {
        storeList.push({
          legalRuleId: this_.legalRuleId == null ? this_.id : this_.legalRuleId,
          storeId: element.id,
          storeName: element.storeName,
          storeCode: element.storeCode,
          storeType: element.storeType,
          merchantId: element.merchantId
        });
      });
      params.storeList = storeList;
      this.utils.request.savePowerStore(params, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.storeSearch();
          this_.storeVisible = false;
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    //确定 选择商品
    productAddClick() {
      if (this.productAddSelection.length < 1) {
        this.$message({ message: "最少选择一条数据!", type: "error" });
        return;
      }
      let params = {};
      let productList = [];
      let this_ = this;
      this.productAddSelection.forEach(element => {
        productList.push({
          spuId: element.id
        });
      });
      params.productList = productList;
      params.legalRuleId =
        this.legalRuleId == null ? this.id : this.legalRuleId;
      this.utils.request.savePowerProduct(params, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
          this_.storeVisible = false;
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    //删除选择的店铺
    deletePowerStore(id) {
      let this_ = this;
      let param = {};
      if (id != null && id != "undefined") {
        param.ids = id;
      } else {
        if(this.storeTableDataSelection.length == 0){
          this_.$message({message:'批量删除时至少选择一条数据', type: 'error'});return;
        }
        param.ids = this.storeTableDataSelection.map(item => item.id);
      }
      this.utils.request.deletePowerStore(param, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.storeSearch();
          this_.powerProductSearch();
        } else {
          this_.$message({ message: "操作成功", type: "success" });
        }
      });
    },
    //添加全部商品
    saveAllProductInfo() {
      let params = {};
      let this_ = this;
      params.legalRuleId = this.id;
      this.utils.request.saveAllProductInfo(params, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.powerProductSearch();
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    //添加全部店铺
    addAllStore() {
      let params = {};
      let this_ = this;
      params.legalRuleId = this.id;
      this.utils.request.saveAllStoreInfo(params, function(res) {
        if (res.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.storeSearch();
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    //保存提示
    saveInfo() {
      this.$message({ message: "操作成功!", type: "success" });
    },
    //获取基础信息
    queryBasic() {
      let this_ = this;
      let query = {};
      query.id = this.id;
      query.start = 1;
      query.limit = 10;
      this.utils.request.queryMemberLegalRuleList(query, function(res) {
        if (res.code == "0000") {
          this_.dataForm.id = res.data.rows[0].id;
          this_.dataForm.deptName = res.data.rows[0].deptName;
          this_.dataForm.legalRuleName = res.data.rows[0].legalRuleName;
          this_.dataForm.legalRuleType = res.data.rows[0].legalRuleType;
          this_.queryInfo(res.data.rows[0].legalRuleType, this_.id);
          //查询权益店铺
          this_.storeSearch();
          //查询权益商品
          this_.powerProductSearch();
        }
      });
    },
    //查询数据渲染表格
    queryInfo(legalRuleType, id) {
      let query = {};
      let this_ = this;
      query.legalRuleType = legalRuleType;
      query.id = id;
      this.utils.request.queryMemberPowerInfo(query, function(res) {
        if (res.code == "0000") {
          if (this_.dataForm.legalRuleType == 3) {
            if (res.data.freightMode == 1) {
              this_.dataForm.freightMode = res.data.freightMode;
            } else if (res.data.freightMode == 2) {
              this_.dataForm.freightMode = res.data.freightMode;
              this_.dataForm.logisticsIncrement =
                res.data.logisticsIncrement.length == 0
                  ? this_.dataForm.logisticsIncrement
                  : res.data.logisticsIncrement;
            }
          } else {
            this_.dataForm.ruleValue = res.data.ruleValue;
          }
        }
      });
    },
    // 编辑,修改
    submitForm: function() {
      var this_ = this;
      if (
        this_.dataForm.legalRuleType == 3 &&
        this_.dataForm.freightMode == 2
      ) {
        let temp = this_.dataForm.logisticsIncrement;
        let flag = false;
        for (let i = 0; i < temp.length; i++) {
          if (
            "" == temp[i].satisfyOrder ||
            null == temp[i].satisfyOrder ||
            "" == temp[i].reductionMoney ||
            null == temp[i].reductionMoney
          ) {
            this_.$message({
              message: "下单满减运费规则不能为空!请输入",
              type: "error"
            });
            flag = false;
            break;
          } else {
            flag = true;
          }
        }
        if (!flag) {
          return;
        }
      }
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            type: "warning",
            closeOnClickModal: false
          }).then(() => {
            let params = Object.assign({}, this.dataForm);
            params.id = this_.id;
            this.utils.request.editMemberLegalInfo(params, function(res) {
              if (res.code == "0000") {
                this_.$message({ message: "操作成功!", type: "success" });
                this_.$refs["dataForm"].resetFields();
                this_.$router.push({path:"/Pages/MemberCenter/Power/MemberLegalRule"});
              }
            });
          });
        }
      });
    },
    //权益店铺查询方法
    storeSearch() {
      this.storeSearchForm.legalRuleId = this.id;
      let this_ = this;
      this.utils.request.queryPowerStoreList(this.storeSearchForm, function(
        res
      ) {
        if (res.code == "0000") {
          this_.storeTableDataTatol = res.data.total;
          this_.storeTableData = res.data.rows;
        }
      });
    },
    //权益商品列表查询
    powerProductSearch() {
      let this_ = this;
      this_.merchantProductSearchForm.legalRuleId = this_.id;
      this.utils.request.querySpuListForTable(
        this_.merchantProductSearchForm,
        function(res) {
          if (res.code == "0000") {
            this_.merchantProductTableData = res.data.rows;
            this_.merchantProductTableDataTotal = res.data.total;
            this_.merchantProductTotalCount = res.data.totalCount;
          }
        }
      );
    },
    //删除方法
    deleteOrderGivenStairArr(index) {
      this.dataForm.logisticsIncrement.splice(index, 1);
    },
    //编辑
    editOrderGivenStairArr() {
      if (this.dataForm.logisticsIncrement.length > 9) {
        this.$message({ message: "新增最多不超过十条！", type: "error" });
      }
      this.dataForm.logisticsIncrement.push({});
    },
    // 换页刷新
    producthandleCurrentChange(pageNum) {
      this.productForm.start = pageNum;
      this.productFormFind();
    },
    producthandleSizeChange(pageSize) {
      this.productForm.start = 1;
      this.productForm.limit = pageSize;
      this.productFormFind();
    },
    //确定 选择店铺
    storeTableData2Click() {
      this.merchantTableDataSubmit2();
    },
    //选择店铺
    storeTableData2AddSelectionChange(val) {
      this.addSelectionStoreTableData2 = val;
    },
    // 换页刷新
    handleSizeChangeStore: function(pageSize) {
      this.storeForm.limit = pageSize;
      this.storeForm.start = 1;
      this.storeFormFind();
    },
    // 换页刷新
    refreshPageRequestStore: function(pageNum) {
      this.storeForm.start = pageNum;
      this.storeFormFind();
    },
    resetStoreForm() {
       //需要校验的key
        let keys = ["storeName","storeCode","merchantName","storeType"]
        let boo = this.seachTableUtils.checkFromIsNull(this.storeForm,keys)
        if(!boo){
          return
        }
      this.$refs["storeForm"].resetFields();
      this.storeFormFind();
    },
    resetProductTable() {
      //需要校验的key
        let keys = ["categoryName","mpCode","mpName"]
        let boo = this.seachTableUtils.checkFromIsNull(this.merchantProductSearchForm,keys)
        if(!boo){
          return
        }
      this.$refs["merchantProductSearchForm"].resetFields();
      this.powerProductSearch();
    },
    //获取子平台列表
    queryDeptOption() {
      let query = {};
      let this_ = this;
      this_.utils.request.queryChildList(query, function(res) {
        if (res.code == "0000") {
          this_.deptOption = res.data;
        }
      });
    },
    //查询店铺
    storeFormFind() {
      var this__ = this;
      this.utils.request.queryStorePage(this.storeForm, function(res) {
        if (res.code == "0000") {
          this__.storeTableData2 = res.data.rows;
          this__.merchantTableDataTatolStore = res.data.total;
        }
      });
    },
    // 商品方法开始
    productFormFind() {
      let that_ = this;
      this.productForm.legalRuleId =
        this.legalRuleId == null ? this.id : this.legalRuleId;
      this.utils.request.querySpuList(this.productForm, function(resp) {
        if (resp.code == "0000") {
          that_.tableDataTwo = resp.data.rows.map((ele, index) => {
            let spu = {};
            spu.id = ele.id;
            spu.code = ele.thirdSpuId;
            spu.chineseName = ele.goodsName;
            spu.totalStock = ele.stock;
            spu.goodsCategory = ele.goodsCategory;
            spu.merchantName = ele.merchantName;
            spu.storeName = ele.storeName;
            spu.salePriceScope = ele.salePriceScope;
            spu.measureUnit = ele.measureUnit;
            return spu;
          });
          that_.productListTotal = resp.data.total;
        }
      });
    },
    handleCurrentChangeMerchantProductTableData(pageNum) {
      this.merchantProductSearchForm.start = pageNum;
      this.powerProductSearch();
    },
    handleSizeChangeMerchantProductTableData(val) {
      this.merchantProductSearchForm.limit = val;
      this.powerProductSearch();
    },
    //
    repelSelectionChange(val) {
      this.repelSelection = val;
    },
    //上一步
    upStep(data) {
      if (data == 2) {
        this.activeName = "first";
      } else if (data == 3) {
        this.activeName = "second";
      }
    },
    //权益获取下一步
    nextStepRulePower(data) {
      var this_ = this;
      if (data == 1) {
        if (
          "" == this.dataForm.legalRuleName ||
          null == this.dataForm.legalRuleName
        ) {
          this.$message({ message: "请输入规则名称", type: "error" });
          return;
        }
        if ("" == this.dataForm.legalRuleType) {
          this.$message({ message: "请选择权益类型", type: "error" });
          return;
        }
        if (this_.dataForm.legalRuleType == 3 && this_.dataForm.freightMode == 2) {
          let temp = this_.dataForm.logisticsIncrement;
          let flag = false;
          for (let i = 0; i < temp.length; i++) {
            if (
              "" == temp[i].satisfyOrder ||
              null == temp[i].satisfyOrder ||
              "" == temp[i].reductionMoney ||
              null == temp[i].reductionMoney
            ) {
              this_.$message({
                message: "下单满减运费规则不能为空!请输入",
                type: "error"
              });
              flag = false;
              break;
            } else {
              flag = true;
            }
          }
          if (!flag) {
            return;
          }
        }
        let params = Object.assign({}, this.dataForm);
        
        this.utils.request.editMemberLegalInfo(params, function(res) {
          if (res.code == "0000") {
            this_.activeName = "second";
          }
        });
        
        
      }
    },
    // 换页刷新
    mainSroreMerchantHandleSizeChange: function(pageSize) {
      this.storeSearchForm.start = 1;
      this.storeSearchForm.limit = pageSize;
      this.storeSearch();
    },
    // 换页刷新
    mainSroreMerchantRefreshPageRequest: function(pageNum) {
      this.storeSearchForm.start = pageNum;
      this.storeSearch();
    },
    storeTableDataselectionChange(val) {
      this.storeTableDataSelection = val;
    },
    resetProductForm() {
      //需要校验的key
        let keys = ["goodsName","thirdSpuId","goodsCategory","merchantName","storeName"]
        let boo = this.seachTableUtils.checkFromIsNull(this.productForm,keys)
        if(!boo){
          return
        }
      this.$refs["productForm"].resetFields();
      this.productFormFind();
    },
    //店铺重置按钮
    resetStoreSearch() {
      //需要校验的key
        let keys = ["childName","storeCode","storeName","merchantName","storeType"]
        let boo = this.seachTableUtils.checkFromIsNull(this.storeSearchForm,keys)
        if(!boo){
          return
        }
      this.$refs["storeSearchForm"].resetFields();
      this.storeSearch();
    },

    returnRuleList: function() {
      this.rulePowerVisible = false;
      this.ruleConsumeVisible = false;
    },
    //table的双色条纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    //修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:rgb(250,250,250);";
      }
    },

    //返回上一层
    back() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.queryBasic();
    this.queryDeptOption();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner   {
  width: 200px !important;
}
/deep/ .el-tabs__item.is-disabled {
  color: #999999;
  font-size: 16px;
}
/deep/ .el-tabs__item {
  padding: 0 30px;
}
/deep/ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0;
}
/deep/ .el-tabs__active-bar {
  height: 4px;
  color: #409eff;
  border-radius: 2px;
}
/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
/deep/ .el-tabs__header {
  margin-bottom: 40px !important;
}
.page-container-detail {
  padding: 35px 60px 60px !important;
}
.noMarginL {
  margin-left: 0 !important;
}
.textRed {
  color: red !important;
}
.inputWidth200{
  width: 200px !important;
}
.formItemNoMargin {
  margin-bottom: 0 !important;
}
.w70{
  width: 80px;
}
.turnInlineBlock{
  display: inline-block !important;
}
.overh{
  overflow: hidden;
}
/deep/ .width200{
  width: 200px !important;
  /deep/ .el-input__inner{
    width: 200px !important;
  }
}
.pl10{
  padding-left: 10px !important;
}
.mb10{
  margin-bottom: 10px !important;
}
.pl95{
  padding-left: 95px !important;
}
.colorE7{
  color: #E7AA4E !important;
}
.pl85{
  padding-left: 85px !important;
}
</style>
